<template>
    <div>
        <h1>Switch 开关</h1>
        <p>开关选择器。</p>
    </div>
    <div>
        <h2>何时使用</h2>
        <ul>
            <li>需要表示开关状态/两种状态之间的切换时；</li>
            <li>和 checkbox的区别是，切换 switch 会直接触发状态改变，而 checkbox 一般用于状态标记，需要和提交操作配合。</li>
        </ul>
    </div>
    <div>
        <h2>基本用法</h2>
        <!--    <Switch :value="y" @update:value="y=$event"/>-->
        <Switch v-model:value="bool"/>

        <p>查看代码</p>
    </div>
    <div>
        <h2>Attributes</h2>
        <table border="0" cellspacing="15" width="600">
            <tr>
                <th>参数</th>
                <th>说明</th>
                <th>类型</th>
                <th>默认值</th>
            </tr>
            <tr>
                <td>defaultChecked</td>
                <td>初始是否选中</td>
                <td>boolean</td>
                <td>false</td>
            </tr>
        </table>
    </div>
    <div>
        <h2>Events</h2>
        <table border="0" cellspacing="15" width="600">
            <tr>
                <th>事件名称</th>
                <th>说明</th>
                <th>回调参数</th>
            </tr>
            <tr>
                <td>change</td>
                <td>switch 状态发生变化时的回调函数</td>
                <td>新状态的值</td>
            </tr>
        </table>
    </div>
    <div>
        <h2>方法</h2>
        <table border="0" cellspacing="15" width="600">
            <tr>
                <th>方法名</th>
                <th>说明</th>
                <th>参数</th>
            </tr>
            <tr>
                <td>defaultChecked</td>
                <td>初始是否选中</td>
                <td>-</td>
            </tr>
        </table>

    </div>
    <div class="page">
        <p class="fl">上一步：
            <router-link to="/doc/start">快速上手</router-link>
        </p>
        <p class="fr">下一节：
            <router-link to="/doc/button">Button 组件</router-link>
        </p>
    </div>
    <div>

    </div>
</template>

<script lang="ts">
    import Switch from "../lib/Switch.vue";
    import {ref} from "vue";

    export default {
        components: {Switch},
        setup() {
            const bool = ref(true)
            return {bool}
        }
    }
</script>

<style lang="scss" scoped>
    div {
        margin-bottom: 40px;
        & > :first-child {
            margin-bottom: 20px;
            margin-left: 0px;
            position: relative;
            z-index: -1;
        }
        & > *{
            margin-left: 20px;
        }
    }

    ul {
        padding: 0 20px;
    }

    li {
        list-style-type: disc;
        padding: 10px 0;
    }

    .page {
        margin-top: 30px;

        a {
            color: #50a0ff;
        }
    }


</style>
